<template>
  <div class="qqLogin">
    <p>回调地址</p>
    <!-- qq授权内容 -->
    <!-- <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '60%' }"
      close-icon="close"
      round
    >
      <scroller>
        <div class="qqLoginbox">
          <iframe
            src="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy"
            frameborder="0"
            class="qqLoginpage"
          ></iframe>
        </div>
      </scroller>
    </van-popup> -->
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      show: false, // qq授权弹窗
    };
  },
  created() {
    //   面板显示
    // this.show = true;
    this.getQQAccessToken();
  },
  methods: {
    getQQAccessToken() {
      //  回调状态
      let ifLogin = this.$QQ.Login.check();
      if (ifLogin) {
        // 通过 sdk方法获取 openid、认证服务器token
        this.$QQ.Login.getMe((openId, accessToken) => {
          // 根据 腾讯认证服务器返回的 openid、token，向服务器请求用户数据
          let info = {
            type: "get",
            url: `/user/qqinfo?access_token=${accessToken}&openid=${openId}&oauth_consumer_key=101850878`,
          };

          this.$netWork(info)
            .then((res) => {
              if (res.data.status === 0) {
                // 保存用户头像
                sessionStorage.setItem("userImg", res.data.data.figureurl_qq);
                // 根据 服务器返回的 token 向 服务器发送登录请求
                let dataInfo = {
                  openid: openId,
                  username: res.data.data.nickname,
                };
                // 发送登录请求
                axios
                  .post("/user/qqlogin", qs.stringify(dataInfo))
                  .then((res) => {
                    if (res.data.status === 0) {
                      let token = res.data.data.token;
                      sessionStorage.setItem("token", token);
                      this.$router.replace("/myHome");
                    }
                  });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep ._v-content {
  width: 100%;
  height: 100%;
  .qqLoginbox {
    width: 100%;
    height: 100%;
    // qq授权内容
    .qqLoginpage {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
